<!--
  ~ Electronic Logistics Management Information System (eLMIS) is a supply chain management system for health commodities in a developing country setting.
  ~
  ~ Copyright (C) 2015  John Snow, Inc (JSI). This program was produced for the U.S. Agency for International Development (USAID). It was prepared under the USAID | DELIVER PROJECT, Task Order 4.
  ~
  ~ This program is free software: you can redistribute it and/or modify it under the terms of the GNU Affero General Public License as published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version.
  ~
  ~ This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU Affero General Public License for more details.
  ~
  ~ You should have received a copy of the GNU Affero General Public License along with this program.  If not, see <http://www.gnu.org/licenses/>.
  -->
<style xmlns="http://www.w3.org/1999/html">
    #popupModel {

        width: 1000px;
        left: auto;
        right: 190px;

    }

    .reporting-data {
        display: inline-block;
        width: 100px;
    }


</style>


<div class="row-fluid sortable ui-sortable">
    <div class="box span12">
        <div class="box-header">
            <h2><i class="icon-edit"></i><span class="break" openlmis-message="report.title.timeliness.in.reporting"></span></h2>

            <div class="box-icon">
                <a ng-click="section(0)" ng-show="show(1)" class="btn-minimize"><i class="icon-chevron-up"></i></a>
                <a ng-click="section(1)" ng-show="show(0)" class="btn-minimize"><i class="icon-chevron-down"></i></a>
                <a id="pdf-button" href="" ng-click="exportReport('PDF')" class='btn-small btn-info'><span openlmis-message="label.pdf"></span></a>
                <a id="xls-button" href="" ng-click="exportReport('XLS')" class='btn-small btn-info'><span openlmis-message="label.excel"></span></a>
                <span ng-show="unscheduledData.length > 0">
                    <a id="mailing-button" href="#list" ng-click="exportReport('unscheduled-reporting')" class='btn-small btn-info' openlmis-message="button.label.unscheduled.reporting"></a>
                </span>

            </div>
        </div>
        <div>
            <div class="app-form">

                <form ng-submit="filterGrid()" name="filterForm" novalidate>
                    <div filter-container class="clearfix">
                        <program-filter class="form-cell horizontalFilters" required="true"></program-filter>
                        <schedule-filter class="form-cell horizontalFilters" required="true"></schedule-filter>
                        <year-filter class="form-cell horizontalFilters" required="true"></year-filter>
                        <period-filter class="form-cell horizontalFilters" required="true"></period-filter>
                        <zone-filter class="form-cell horizontalFilters"></zone-filter>
                    </div>
                </form>
            </div>
        </div>
        <table client-side-sort-pagination class="table table-bordered" ng-show="data == undefined || data.length == 0">
            <tr>
                <td>No data to show under selected filters</td>
            </tr>
        </table>
        <div ng-show="datarows.length > 0">
            <div class="pull-right legend">Page: {{tableParams.page}}, Showing records {{ ((tableParams.page - 1) *
                tableParams.count) + 1 }} to {{ (tableParams.page ) * tableParams.count }} of {{tableParams.total}}
            </div>

            <div class="span12 offset1" ng-repeat="dates in reportingDates ">

                <div>
                    <div class="pull-left" style="font-size:13px; font-weight: bold;left: 0;">
                        <span data-toggle="tooltip" title="This facilities reported on Time "
                              class="icon-warning-sign green"></span>
                        <span openlmis-message="label.timeliness.reported.on.time.from"> </span> :<strong> <span
                            class="reporting-data">{{dates.reportingStartDate | date:'dd-MM-yyyy'}}</span></strong>
                        <span> To </span> : <strong> <span class="reporting-data">{{dates.reportingEndDate | date:'dd-MM-yyyy'}}</span></strong>

                    </div>
                </div>

                <div>
                    <div class="pull-left" style="font-size:13px; font-weight: bold;">
                        <span data-toggle="tooltip" title="This facilities reported Late "
                              class="icon-warning-sign red"></span>
                        <span openlmis-message="label.timeliness.reported.late.from"></span> :<strong> <span
                            class="reporting-data">{{dates.reportingLateStartDate | date:'dd-MM-yyyy'}}</span></strong>
                        <span> To </span> : <strong><span class="reporting-data">{{dates.reportingLateEndDate | date:'dd-MM-yyyy'}}</span></strong>

                    </div>
                </div>

                <div>
                    <div class="pull-left" style="font-size:13px; font-weight: bold;">
                        <span openlmis-message="label.timeliness.reported.unscheduled"></span> :<strong> <span
                            class="reporting-data">{{dates.reportingLateEndDate | date:'dd-MM-yyyy'}}</span></strong>
                    </div>
                </div>


            </div>

            <div class="container-fluid">
                <div class="row-fluid">

                    <div class="span12">
                        <table ng-show="datarows.length > 0" class="table-bordered table table-striped"
                               ng-table="tableParams">
                            <tbody>
                            <tr ng-repeat="row in datarows | filter: greaterThan('expected', 0)">

                                <td data-title="'#'" class="number" style="width:20px; ">{{ row.no }}</td>
                                <td data-title="'District'" style="width:80px;!important;" sortable="district">
                                    {{row.district }}
                                </td>
                                <td data-title="'Region'" style="width:90px;!important;" sortable="region">
                                    {{row.region }}
                                </td>
                                <td data-title="'MSD Zone'" style="width:90px;!important;" sortable="depot">
                                    {{row.depot }}
                                </td>
                                <td data-title="'Expected'" style="width:40px;!important;" class="number"
                                    sortable="expected">{{ row.expected | number}}
                                </td>
                                <td data-title="'Reported On Time'" class="number" sortable="reportedOnTime"
                                    style="width:10%;!important;"
                                    sortable="reportedOnTime">{{ row.reportedOnTime | number }}
                                </td>
                                <td data-title="'Reported Late'" class="number" sortable="reportedLate"
                                    style="width:10%;!important;"
                                    sortable="reportedLate">{{ row.reportedLate | number }}
                                </td>
                                <td data-title="'Unscheduled Reporters'" class="number" style="width:8%;!important;"
                                    sortable="unscheduled">{{ row.unscheduled | number }}
                                </td>
                                <td data-title="'Non Reporting'" class="number" style="width:10%;!important;"
                                    sortable="unscheduled">
                                    <a ng-href="/public/pages/reports/non-reporting/index.html#/list?schedule={{filter.schedule}}&zone={{row.zoneId}}&year={{filter.year}}&period={{filter.period}}&program={{filter.program}}"
                                       openlmis-message="button.view.non.reporting.report"></a>

                                </td>
                                <td style="font-weight: bold;text-align: right;width: 50%;"
                                    data-title="'% Reported On-Time'">
                                    <div class="number" style="float:right;!important;">{{((row.reportedOnTime /
                                        row.expected) *100).toFixed(0)}} %
                                    </div>
                                    <div ng-show="(row.reportedOnTime + row.reportedLate) !=0" class="progress"
                                         style="margin-bottom:0px;width:90%">

                                        <div class="bar bar-success leaflet-clickable"
                                             ng-click="getOnTimelinessReport(row, this);"
                                             style="width: {{((row.reportedOnTime / row.expected) * 100).toFixed(2)}}%">
                                            {{row.reportedOnTime}}
                                        </div>
                                        <div class="bar bar-danger leaflet-clickable"
                                             ng-click="getTimelinessLateReported(row, this);"
                                             style="width: {{(100-((row.reportedOnTime / row.expected) * 100).toFixed(2))}}%">
                                            {{row.reportedLate}}
                                        </div>

                                    </div>

                                </td>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>


        </div>
    </div>
</div>


<div id="popupModel" modal="successModal">

    <div class="modal-header">
        <h3 style="text-align: center;">{{ district }}</h3>
    </div>
    <div class="modal-body">


        <div class="row-fluid">
            <div class="span7">
                <table ng-show="facilities.length > 0"
                       class="table table-bordered table-scrollable pull-right">
                    <thead>
                    <tr>
                        <th>Facility Code</th>
                        <th>Facility Name</th>
                        <th>Currently R&R Pending At</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr ng-repeat="row in facilities">

                        <td style="width: 20%;">
                            <span data-toggle="tooltip" title="This facility did not report on Time "
                                  class="icon-warning-sign red"
                                  ng-show="row.reportingStatus =='L'"></span>
                               <span data-toggle="tooltip" title="This facility has reported on Time"
                                     class="icon-warning-sign green"
                                     ng-show="row.reportingStatus =='R'"></span>
                            {{row.facilityCode}}
                        </td>
                        <td style="width: 40%;">{{row.facilityName}} - {{row.facilityTypeName}}</td>
                        <td style="width: 40%;"><span
                                openlmis-message="label.rnr.status.summary.{{row.status}}"></span></td>
                        <td><span><input type="checkbox" ng-model="row.selected"
                                         ng-change="rnrStatusSelectChange(row.selected, row)"></span></td>

                    </tr>

                    </tbody>


                </table>
            </div>
            <div class="span5">
                <br><br>

                <div class="span12">

                    <div ng-show="facilityRnRStatusess.length > 0">

                        <div ng-repeat-start="k in facilityRnRStatusess | orderBy:'k.status'">

                            <table class="table table-striped table-scrollable">
                                <thead>
                                <tr>
                                    <th>Status</th>
                                    <th>Reported Date</th>

                                </tr>
                                </thead>
                                <tbody>
                                <tr>

                                    <div class="span12">
                                        <p style="text-align: left;"> {{reportingDate}}
                                            <strong> {{k.facility[0]}}
                                                {{k.facilityType[0]}}
                                            </strong>
                                        </p>
                                    </div>

                                    <td>
                                        <span ng-repeat="(key,value) in k.status track by key"
                                              openlmis-message="label.rnr.status.summary.{{value}}">
                                           <br>
                                         </span>
                                    </td>

                                    <td>
                                            <span ng-repeat="(key,val) in k.duration track by key">
                                                {{val | date:'dd-MM-yyyy'}}<br>

                                            </span>
                                    </td>
                                </tr>

                                </tbody>
                            </table>
                        </div>
                        <div ng-repeat-end>

                        </div>


                    </div>


                </div>


            </div>
        </div>


    </div>

    <div class="modal-footer">
        <a class="btn btn-primary pull-right" ng-click="successModal=false;">Close</a>

    </div>

</div>
